<template>
	<view class="content">
		<view class="head">
			<text>{{ title }}</text>
		</view>
		<view class="body">
			<view class="item" v-for="(item, i) in weeks" :key="item">
				<view class="item-left">
					<text class="item-left-text">{{ item }}</text>
				</view>
				<!-- 非管理员显示 -->
				<view v-if="userStore.notAdmin && data[i]?.dishes.length" class="item-right">
					<text v-for="dish in data[i].dishes" :key="dish" class="item-right-text">
						{{ dish }}
					</text>
				</view>
				<!-- 仅管理员显示 -->
				<view
					v-if="userStore.admin && data[i]?.dishes.length"
					class="item-right"
					@tap="onClick(data[i].date)"
				>
					<text v-for="dish in data[i].dishes" :key="dish" class="item-right-text">
						{{ dish }}
					</text>
				</view>

				<!-- 没有设置菜单 -->
				<view v-if="!data[i]?.dishes.length" class="item-right__none">
					<!-- 仅管理员显示 -->
					<text
						v-if="userStore.admin"
						class="item-right-text_none"
						@tap="onClick(data[i].date)"
					>
						还没有设置菜单，点击设置菜单
					</text>
					<!-- 非管理员显示 -->
					<text v-else class="item-right-text_none">还没有设置菜单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import { getNextWeekDates, getThisWeekDates } from '@/utils/date.utils.js';
import { useUserStore } from '../../stores/useUserStore';

const userStore = useUserStore();

const $emits = defineEmits(['pick']);
const $props = defineProps({
	// 是否下周，默认本周
	nextWeek: Boolean,
	data: {
		type: Object,
		default: () => {
			return [
				// { date: '', dishes: [] },
			];
		},
	},
});

const thisWeekDates = getThisWeekDates();
const nextWeekDates = getNextWeekDates();
console.log('thisWeekDates', thisWeekDates);
console.log('nextWeekDates', nextWeekDates);

const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

// 计算标题
const title = computed(() => {
	if ($props.nextWeek) {
		return `下周（${nextWeekDates[0]} 至 ${nextWeekDates[6]}）`;
	}
	return `本周（${thisWeekDates[0]} 至 ${thisWeekDates[6]}）`;
});

const onClick = (date) => {
	$emits('pick', date);
};
</script>

<style scoped>
.content {
	border-radius: 16rpx;
	overflow: hidden;
}

.head {
	display: flex;
	align-items: center;
	height: 84rpx;
	padding: 0 16rpx;

	font-size: 16px;
	color: white;
	background: linear-gradient(rgba(64, 162, 255, 1), rgba(96, 162, 255, 0.6));
}

.item {
	display: flex;
	padding: 24rpx;
	background-color: #fff;
	border-bottom: 1px solid #eeeeee;
}

.item-left {
	width: 56rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.item-left-text {
	font-size: 14px;
	color: #3ab54a;
	writing-mode: vertical-lr;
}

.item-right {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
}

.item-right__none {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-right-text {
	width: 190rpx;
	text-align: center;
	font-size: 12px;
	color: #333333;
	overflow: hidden;
}

.item-right-text_none {
	font-size: 12px;
	color: #999;
}
</style>
